<template>
  <view>
    <view class="search-box">
      <uni-search-bar @input="input" :radius="100" cancel-button="none"></uni-search-bar>
    </view>
    <!-- 搜索建议列表 -->
    <view class="sugg-list" v-if="searchResults.length!==0">
      <view class="sugg-item" v-for="(item,index) in searchResults" :key="index" @click="gotoDetail(item)">
        <view class="goods-name">{{item.goods_name}}</view>
         <uni-icons type="arrowright" size="16" class="icon-right"></uni-icons>
      </view>
    </view>
  <!-- 搜索历史 -->
  <view class="history-box" v-else>
    <!-- 标题区域 -->
    <view class="history-title">
      <text>搜索历史</text>
      <uni-icons type="trash" size="17" @click="clean"></uni-icons>
    </view>
    <!-- 列表区域 -->
    <view class="history-list">
      <uni-tag @click="gotoGoodsList(item)" :text="item" v-for="(item,index) in histories" :key="index"></uni-tag>
    </view>
  </view>
  </view>
  
</template>

<script>
  export default {
    data() {
      return {
        // 清除定时器
        timer:null,
        // 搜索关键词
        kw:'',
        // 搜索结果列表
        searchResults:[],
        // 搜索历史的数组
        historyList:[]
      };
    },
    onLoad() {
  this.historyList = JSON.parse(uni.getStorageSync('kw')||'[]')
    },
    methods:{
      input(value){
       // 清除定时器
       clearTimeout(this.timer)
      this.timer = setTimeout(()=>{
         this.kw = value
         // 点击的时候,获取数据
         this.getSearch()
       },500)
           },
           getSearch(){
             // 判断关键词是否为空
             if(this.kw.length===0){
               this.searchResults =[]
               return
             }
             uni.request({
               url:'https://api-hmugo-web.itheima.net/api/public/v1/goods/search',
               method:'GET',
              query:this.kw,
               success:(res)=>{
                 this.searchResults = res.data.message.goods
                 this.saveGetSearch()
               }
             })
           },
           // 跳转到详情页面
           gotoDetail(item){
             uni.navigateTo({
               url:'/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id
             })
           },
           // 保存搜索历史记录
           saveGetSearch(){
             // 这里解决搜素历史记录往后的时候,可以使用unshift也可以解决
             // this.historyList.push(this.kw)
             // 解决搜索记录重复的问题
             const set = new Set(this.historyList)
             // 在搜索的时候,会先删除关键字里面重复的数据
             set.delete(this.kw)
             // 然后再添加新的搜索关键字进去
             set.add(this.kw)
             // 把对象转换为一个数组
             this.historyList =Array.from(set)
             // 对搜索历史数据,进行持久化处理
             uni.setStorageSync('kw',JSON.stringify(this.historyList))
           },
           // 清除历史记录
           clean(){
             this.historyList =[]
             uni.getStorageSync('kw','[]')
           },
           // 点击搜索历史跳转商品列表
           gotoGoodsList(kw){
             uni.navigateTo({
               url:'/subpkg/goods_list/goods_list?query'+kw
             })
           }
    },
    computed:{
     histories(){
      return [...this.historyList].reverse()
     }
    }
  }
</script>

<style lang="scss">
.search-box{
  position: sticky;
  top: 0;
  z-index: 999;
}
.sugg-list{
  padding: 0 5px;
  .sugg-item{
    font-size: 12px;
    padding: 13px 0;
    border-bottom: 1px solid red;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .goods-name{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-right: 3px;
    }
  }
}
.icon-right{
  margin-top: 2px;
}
// 搜索历史区域
.history-box{
  padding: 0 5px;
 .history-title{
   display: flex;
   justify-content: space-between;
   font-size: 13px;
   align-items: center;
   height: 40px;
   border-bottom: 1px solid #efefef;
 }
.history-list{  
  display: flex;
  flex-wrap: wrap;
  .uni-tag{
    margin: 5px 5px 0 0;
  }
}
}
</style>
